<template>
	<Nav class="f">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
			</view>
			<view>搜索</view>
		</view>
	</Nav>
	<view :style="{marginTop: navHeiht+ 'px'}" class="main">
		<view class="content" :style="{top: navHeiht+ 'px'}">
			<view class="s">
				<Search @search="" />
			</view>
			<view class="tab dispaly-center">
				<view :class="{'ac': current == index}" @click="current = index" class="tab-item"
					v-for="(item,index) in tabList" :key="item.type">
					<view class="name dispaly-align-center">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="p-32" :style="{marginTop: listHeight + navHeiht + 'px'}">
			<view v-if="current == 0">
				<PictureCard />
			</view>
			<view v-if="current == 1">
				<Waterfall cardType="cate" />
			</view>
			<view v-if="current == 2">
				<TeacherCard />
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import Search from '@/compoment/search/search.vue'
	import PictureCard from '@/compoment/card/pictureCard.vue'
	import TeacherCard from '@/compoment/card/teacherCard.vue'
	import Waterfall from '@/compoment/waterfall/waterfall.vue'
	import {
		getElementHeight
	} from '@/utils/util'

	// 获取元素高度
	const navHeiht = ref(0)
	const listHeight = ref(0)
	onMounted(async () => {
		const res = await getElementHeight('.f')
		const listHeightRes = await getElementHeight('.content ')
		listHeight.value = listHeightRes
		navHeiht.value = res
	})

	const tabList = ref([{
			name: '图库',
			type: 1
		},
		{
			name: '案例',
			type: 2
		},
		{
			name: '师傅',
			type: 3
		},
	])

	const current = ref(0)
</script>

<style lang="scss" scoped>
	.ac {
		border-bottom: 4rpx solid #020121;
	}

	.home-content {
		margin: 0 32rpx;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.main {
		.content {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 999;

			.tab {
				margin-top: 32rpx;

				.tab-item {
					width: 33.3%;
					box-sizing: border-box;
					padding-bottom: 20rpx;

					.name {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #020121;
					}
				}

			}
		}
	}
</style>

<style>

</style>